<template>
    <div class="page-content">

        <!-- 顶部按钮 begin -->
        <TopButton 
        :cosList="baseList"
        @refresh="refresh" 
        @cosChange="baseChange"
        >
        </TopButton>
        <!-- 顶部按钮 end -->

        <!-- 监控设备展示 begin -->
        <el-row :gutter="5" v-loading="loading">
            <el-col 
            :span="8" 
            v-for="(item, index) in deviceData" 
            :key="index"
            >
                <el-card v-if="item.statusCode=='1'? true : false">
                    <div slot="header" class="clearfix item_header">
                        <!-- <span>{{item.videoName}}</span> -->
                        <span>设备{{index+1}}</span>
                    </div>
                    <div class="iframe_div" style="overflow:hidden;margin:0 auto;">
                        <iframe 
                        :src="item.videoUrl" 
                        frameborder="0"
                        class="iframe_style"
                        style="background-color:transparent;overflow-x:hidden;overflow-y:scroll" 
                        scrolling="no" 
                        width="100%" 
                        height="100%"
                        >
                        </iframe>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 监控设备展示 end -->
    </div>
</template>

<script>

// API 
import { 
    getBaseInfo,         // 获取基地信息 
    getMonitorByNumber, // 通过基地编号获取摄像头
     } from '../../Api/leadership/Monitoring'

// 导入vuex API
import { mapState } from 'vuex'

// Component 
import TopButton from '../../components/LeadershipPositions/Monitoring/TopButton.vue'

export default {
    name: "Monitoring",

    components: { TopButton },

    // 注入从 Home.vue 组件中暴露的 reload 的属性
    inject: ["reload"],

    computed: {

        // 从 vuex deviceCenter 模块获取 deviceData 
        ...mapState({
            deviceData: state => state.deviceCenter.deviceData
        }),
    },

    data() {
        return {

            // 调用接口参数
            getMonitor_parameter: {
                baseId: 1,
                page: 1,
                size: 6
             },

            // 基地名列表
            baseList: [],

            // 基地所有信息
            baseInfo: [],

            // 控制加载组件
            loading: false
        }
    },

    created() {

        // 获取摄像头信息
        this.getData(this.getMonitor_parameter)

        // 获取基地列表
        this.getBaseList()
    },

    methods: {
        
        // 获取基地信息和列表
        getBaseList() {

            getBaseInfo().then(res => {
                 // 筛选出基地名元素
                const baseList = res.data.data.map(item => item.基地名)

                this.baseInfo = res.data.data    // 基地所有信息
                this.baseList.push(...baseList)  // 基地列表
            })
        },

        // 基地更换回调
        baseChange(index, baseName) {
            const curBase = this.baseInfo.filter(
                item => item.基地名 === baseName
            )

            if (curBase.length) {
                this.getMonitor_parameter.baseId = curBase[0].基地id
                
                // 获取当前基地设备
                getMonitorByNumber(this.getMonitor_parameter).then(res => {
                    if( res.data.flag == true ) {
                        const {records: data} = res.data.data 

                        this.$store.commit("deviceCenter/mutationDeviceData", data)

                        this.$message({
                            type: 'success',
                            message: `切换到${baseName}`
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '切换失败'
                        })
                    }
                })
            }
        },

        // 封装获取摄像头信息函数，避免代码重复
        getData(getMonitor_parameter) {

            // 获取摄像头信息
            getMonitorByNumber(getMonitor_parameter).then(res => {
                console.log(res);
                if(res.data.flag) {
                    const {records : data} =  res.data.data
                    this.$store.commit("deviceCenter/mutationDeviceData", data)
                }
                else {
                    setTimeout(() => {
                        this.loading = false
                    },2000)
                }
            })
        },
        
        // 刷新
        refresh() {
            this.reload()
        }
    }
}
</script>
<style scoped lang="scss">

// 公共样式
.el-card {
    color: #909399;
}

.page-content .el-row .el-card {
    height: 350px;
    margin-top: 10px;

    .item_header {
        text-align: center;
    }
}

.iframe_div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    width: 100%;
    border-radius: 10px;

    .iframe_style {
        height: 100% !important;
        width: 100% !important;
    }   
}

.iframe {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>